<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a onclick="a()">应用1</a>
    <a onclick="b()">应用2</a>
    <script src="/lib/umd/single-spa.js"></script>
    <script>

        function a(){
            history.pushState({},'','/a')
        }
        function b(){
            history.pushState({},'','/b')
        }

        // 参数 1) 注册应用的名字 2) 加载app的方法必须是返回一个promise方法
        singleSpa.registerApplication('app1',
            async (props) => {
                // 这个函数需要返回结果 
                console.log('加载时执行1')
                return {
                    bootstrap: [async (props) => {
                        console.log('bootstrap1')
                    }],
                    mount: async (props) => {
                        console.log('mount1')
                    },
                    unmount: async (props) => {
                        console.log('unmount1');
                    }
                }
            },
            location=>location.pathname.startsWith('/a'), // 根据路径来判断是否应该加载
            {store:{name:'zf',age:10}}
        );
        singleSpa.registerApplication('app2',
            async (props) => {
                // 这个函数需要返回结果 
                console.log('加载时执行2')
                return {
                    bootstrap: async (props) => {
                        console.log('bootstrap2')
                    },
                    mount: async (props) => {
                        console.log('mount2')
                    },
                    unmount: async (props) => {
                        console.log('unmount2');
                    }
                }
            },
            location=>location.pathname.startsWith('/b'), // 根据路径来判断是否应该加载
            {store:{name:'zf',age:10}}
        );
        singleSpa.start(); // 启动这个应用
        // registerApplication 默认会加载应用
        // start时会挂载应用
    </script>
</body>

</html>